App.require(function () {
    var app = App.getCurrent();
    app.defineComponent("str-toggle", {
        set type(val) {
            if (this.property.type === val) return;
            if (val === "checkbox" || val === "radio" || val === "switchbox") {
                var domList = this.domList,
                    label = domList.label,
                    input = domList.input,
                    iDom = domList.i,
                    newSvgStr = this.getSvgStr(val);

                this.property.type = val;
                input.type = val;
                label.setAttribute("type", val);
                iDom.innerHTML = newSvgStr;
            }
        },
        get autofocus() {
            return this.property.autofocus;
        },
        set indeterminate (value) {
            if (this.property.type === "checkbox") {
                this.domList.input.indeterminate = !!value;
            }
        },
        get indeterminate() {
            return this.domList.input.indeterminate;
        },
        get type() {
            return this.property.type;
        },
        set checked(val) {
            this.domList.input.checked = !!val;
        },
        get checked() {
            return this.domList.input.checked;
        },
        set name(val) {
            if (this.property.name === val) return;
            this.property.name = val;
            this.domList.input.name = val;
        },
        get name() {
            return this.property.name;
        },
        get disabled() {
            return this.property.disabled;
        },
        set disabled(value) {
            value = value ? "disabled" : "";
            if (value === this.property.disabled) return;
            if (value) {
                this.domList.input.setAttribute("disabled", "");
            }
            else {
                this.domList.input.removeAttribute("disabled");
            }
            this.property.disabled = value;
        },
        set form(value) {
            this.property.form = value;
            this.domList.input.form = value;
        },
        get form() {
            return this.property.form;
        },
        set value(val) {
            if (val === this.property.value) return;
            this.property.value = val;
            this.domList.input.value = val;
        },
        get value() {
            return this.property.value;
        },
        get className() {
            return this.property.class;
        },
        set className(value) {
            if (this.property.class === value) return;
            this.domList.label.className = value;
            this.property.class = value;
        },
        get defaultChecked() {
            return this.domList.input.defaultChecked;
        },
        getDomObj: function () {
            this.attachDom("input", "input")
                .attachDom("label", "label")
                .attachDom("i", "i")
                .attachDom(".str-toggle-content", "content")
                .attachEvent("input", "change", this.changeHandler, false)
                .attachEvent("input", "blur", this.blurHandler, false)
                .attachEvent("input", "focus", this.focusHandler, false);
        },
        changeSlotContent: function (str) {
            var slot = this.getSlotByName("default");
            slot.content = str;
            this.domList.content.innerHTML = str;
        },
        blurHandler: function (ev) {
            this.dispatchCustomEvent("toggleblur", {
                component: this,
                target: ev.currentTarget
            });
        },
        focusHandler: function (ev) {
            this.dispatchCustomEvent("togglefocus", {
                component: this,
                target: ev.currentTarget
            });
        },
        changeHandler: function (ev) {
            this.dispatchCustomEvent("togglechange", {
                component: this,
                target: ev.currentTarget
            });
        },
        getSvgStr: function (str) {
            if (str === "checkbox") return '<svg width="18" height="18" viewbox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/></svg>';
            else if (str === "radio") return '<svg width="18" height="18" viewbox="0 0 24 24"><path d="M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z"/></svg>';
            return '';
        },
        computeDate: function () {
            var property = this.property;
            property.type = property.type || "checkbox";
            property.svgStr = this.getSvgStr(property.type);
            property.class = property.class || "";
            property.disabled = typeof property.disabled !== "undefined" ? "disabled" : "";
            property.autofocus = typeof property.autofocus !== "undefined";
            property.form = property.form || "";
            property.name = property.name || this.uid;
            property.checked = typeof property.checked !== "undefined" ? true : false;
            property.value = property.value || "";
            property.computedtype = this.createComputeType(property.type);
            this.data.propertystr = this.createPropertyStr({
                class: property.class,
                type: property.type
            })
        },
        createComputeType: function (type) {
            if (type === "switchbox") return "checkbox";
            return type;
        },
        render: function (next) {
            this.computeDate();
            this.fetch("index.html", function (text) {
                return next(this.renderHTML(text));
            })
        },
        focus: function () {
            this.domList.input.focus();
        },
        blur: function () {
            this.domList.input.blur();
        },
        reset: function() {
            var defaultChecked = this.domList.input.defaultChecked;
            this.domList.input.checked = defaultChecked;
            this.property.checked = defaultChecked;
        }
    })
});